<template>
	<view class="">
		<map id="map" style="width: 100%; height: 900px;" :latitude="latitude" :longitude="longitude" :radius="50"
			fillColor="#ffc933" color="#1b98e3" :enable-satellite="true" :enable-overlooking="true"
			:enable-building="true" :circles="circles" :markers="covers" :rotate="rotate" :enable-indoorMap="true"
			:enable-3D="true" theme="satellite">
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				id: 1, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 31.289913,
				longitude: 121.11985, // 121.10601
				rotate: 360,
				circles: [{
					latitude: 31.289913,
					longitude: 121.11985,
					color: '#54C3FF',
					fillColor: '#A3FF746A',
					radius: 1500,
					strokeWidth: 1
				}],
				covers: [
					{
						id: 1,
						latitude: 31.289905,
						longitude: 121.11060,
						iconPath: '../../static/position/fiexd.png',
						callout: {
							content: "测试标题1",
							color: "#fff",
							fontSize: 30,
							borderRadius: 20,
							borderColor: "#ffff7f",
							bgColor: "#1ba035",
							padding: 20,
							display: "ALWAYS",
							textAlign: "center",
						},
						lable: {
							title: "title_test",
							color: "#ffff00",
							fontSize: 20,
							padding: 10,

						},
					},
	 

					{
						id: 1,
						latitude: 31.289911,
						longitude: 121.11985,
						customCallout: {
							content: "测试2",
						 
						},
						iconPath: '../../static/position/fiexd.png'
					},
					{
						id: 1,
						latitude: 31.281911,
						longitude: 121.10985,
						iconPath: '../../static/position/fiexd.png'
					},
					{
						id: 3,
						latitude: 33.239913,
						longitude: 123.10185,
						iconPath: '../../static/position/fiexd.png'
					},
					{
						id: 1,
						latitude: 32.126613,
						longitude: 123.11285,
						iconPath: '../../static/position/fiexd.png'
					},
					{
						id: 1,
						latitude: 31.126613,
						longitude: 122.15185,
						iconPath: '../../static/position/fiexd.png'
					},
					{
						id: 1,
						latitude: 30.219913,
						longitude: 121.19185,
						iconPath: '../../static/position/fiexd.png'
					},
					{
						id: 1,
						latitude: 29.219913,
						longitude: 122.17185,
						iconPath: '../../static/position/fiexd.png'
					},
					{
						id: 1,
						latitude: 28.280913,
						longitude: 126.19185,
						iconPath: '../../static/position/fiexd.png'
					},
					{
						id: 1,
						latitude: 29.215513,
						longitude: 122.80185,
						iconPath: '../../static/position/fiexd.png'
					}
				]

			}
		},
		onLoad() {
			setTimeout(() => {
				uni.$emit('page-popup', {
					title: '我是传递的内容'
				});
				const subNVue = uni.getSubNVueById('tSubNvue')
				subNVue.show('slide-in-bottom')
				subNVue.setStyle({
					top: "85%",
					// left: '100px',  
					position: 'absolute',
					mask: "navigationBar",
					background: "transparent",
					width: '100%'
				})
				const subNVue1 = uni.getSubNVueById('tSubNvue1')
				subNVue1.show('slide-in-bottom')
				subNVue1.setStyle({
					// top: "6%",  
					// left: '100px',  
					position: 'absolute',
					mask: "navigationBar",
					// background: "rgba(0,0,0, .5)",
					background: "transparent",
					width: '100%'
				})
			})



			var that = this
			uni.getLocation({
				type: 'wgs84',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					console.log(res)

				},
				fail: function() {
					uni.showToast({
						title: '获取地址失败，将导致部分功能不可用',
						icon: 'none'
					});
				}
			});
		},
		methods: {
			onControltap() {
				uni.showToast({
					title: '哈哈哈'
				})

			}
		}
	}
</script>

<style>
	.bottom_box {
		z-index: 9999999;
		position: absolute;
		left: 50%;
		bottom: 10%;
		transform: translateX(-50%);
		width: 80%;
		height: 100px;
		background-color: aqua;
	}

	.progress {
		width: 100%;
		height: 100%;
	}
</style>


<!-- <template>
	<view class="content">
		<view class="example">
			<view class="example-title">从上侧竖向滑出</view>
			<button type="primary" size="mini" @click="showPopup">显示 弹出层</button>
		</view>
		<view>
			<video style="width: 100vw" v-if="showVideo" id="video"
			:controls="false"
			:src="videoUrl"
			></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showVideo: false,
				videoUrl: 'https://www.apple.com/105/media/cn/mac/family/2018/46c4b917_abfd_45a3_9b51_4e3054191797/films/bruce/mac-bruce-tpl-cn-2018_1280x720h.mp4'
			};
		},
		onLoad() {
 
			uni.$on('popup-page', (data) => {
				console.log(data);
				switch(data.type){
					case 'interactive':
						uni.showModal({
							title: '来自Popup的消息',
							content: data.info
						})
						break;
					default:
						uni.showToast({
							title: data.title,
						})
						break;
				}
			})
 
			uni.$on('drawer-page', (data) => {
				uni.showToast({
					title: '点击了第' + data + '项',
					icon:"none"
				});
			})
		},
 
		onUnload() {
			uni.$off('popup-page')
			uni.$off('drawer-page')
		},
		onReady() {
			this.showVideo = true
		},
		methods: {
		    showPopup() {
 
				uni.$emit('page-popup', {
					title: '我是传递的内容'
				});
				const subNVue = uni.getSubNVueById('tSubNvue')
		        subNVue.show('slide-in-top', 250)
		    }
		}
	}
</script>

<style>
	.content {
		align-content: center;
	    height: 100%;
	}
	.example {
		padding: 0 10px 10px
	}
	.example-title {
		font-size: 14px;
		line-height: 14px;
		color: #777;
		margin: 40px 2rpx;
		position: relative
	}
	.example-title {
		margin: 40rpx 0
	}
	.title {
	    font-size: 20px;
		text-align: center;
	    color: #8f8f94;
	}
</style -->>